<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew title="开具证明" :showBack="true"></pageHeaderNew>
    </template>
    <div style="display: flex; justify-content: center">
      <a-steps :current="step" style="width: 600px; margin: 20px">
        <a-step>基本信息</a-step>
        <a-step>预览开具信息</a-step>
      </a-steps>
    </div>
    <div class="step1" v-show="step === 1">
      <a-form :model="formData" style="width: 500px" auto-label-width>
        <a-form-item label="开具证明类型" required>
          <a-select
            v-model="formData.type"
            @change="
              () => {
                formData.userIds = [];
                formData.typeName = formData.type === 2 ? 7 : 5;
                formData.templateId = undefined;
              }
            "
          >
            <a-option
              v-for="(item, index) in ['实习', '离职', '工作', '收入']"
              :key="index"
              :value="index + 1"
            >
              {{ item }}证明
            </a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="开具证明员工" required>
          <HumanMultipleModal
            ref="refHumanMultipleModal"
            :disabled="formData.disabled"
            :typeName="[formData.typeName]"
            v-model:values="formData.userIds"
          />
        </a-form-item>
        <a-form-item label="选择开具证明模板" required>
          <a-select v-model="formData.templateId">
            <a-option
              v-for="item in internshipProofList[(formData.type || 0) - 1]
                ? internshipProofList[(formData.type || 0) - 1].content
                : []"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }}
            </a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <div
        class="htmlBox"
        v-html="templateData.text"
        :style="{
          width:
            (templateData.direction === 1 ? paper.a4.width : paper.a4.height) +
            'px',
          height:
            (templateData.direction === 1 ? paper.a4.height : paper.a4.width) +
            'px'
        }"
      />
      <div>
        <a-button type="primary" @click="nextStep">下一步</a-button>
      </div>
    </div>
    <Step2
      ref="refStep2"
      v-show="step === 2"
      :direction="templateData.direction"
      @back="() => step--"
    />
  </ContentCard>
</template>

<script setup lang="ts">
import HumanMultipleModal from '@/components/HumanMultipleModal/index.vue';
import { GetBusinessModalData } from '@/apis/controltotal';
import { paper } from '@/utils/printAndPdf';
import Step2 from './Step2.vue';
import { GetInternshipProofTemplate } from '@/apis/management/human/baseSetting/certificateSetting';
import { Message } from '@arco-design/web-vue';

let formData = reactive<{
  userIds: number[];
  type?: number;
  typeName?: number;
  disabled?: boolean;
  templateId?: number;
}>({
  userIds: [],
  typeName: 5
});

let refHumanMultipleModal = ref();
let refStep2 = ref();
let nextStep = () => {
  if (!formData.templateId) return Message.error('请选择模板');
  if (!formData.userIds.length) return Message.error('请选择人员');
  let choideList = refHumanMultipleModal.value.getChoiceList();
  if (
    formData.type === 2 &&
    choideList.every(({ progress }: any) => progress !== 7)
  )
    return Message.error('离职证明必须选择已离职人员');
  refStep2.value.setUsers(
    choideList.map(({ id, name }: any) => {
      return {
        id,
        name
      };
    }),
    formData.templateId
  );
  step.value++;
};

let route = useRoute();
let templateData = computed(() => {
  if (!formData.type || !formData.templateId) return { test: '' };
  let text = '';
  let item = internshipProofList.value[(formData.type || 0) - 1].content.find(
    ({ id }: any) => id === formData.templateId
  );
  text = item.text;
  fieldList.value.forEach(({ ctlCode, ctlCnName }) => {
    text = text.replaceAll(ctlCode, ctlCnName);
  });
  return { text, direction: item.direction };
});

//模板信息
let internshipProofList = ref<any[]>([]);
//字段信息
let fieldList = ref<any[]>([]);
let loadData = async () => {
  try {
    let data = JSON.parse(route.query.jsonStr + '');
    formData.type = data.type;
    formData.typeName = formData.type === 2 ? 7 : 5;
    formData.userIds = data.userIds;
    formData.disabled = !!data.disabled;
  } catch (err) {
    //
  }
  let pageData = { pageNumber: 0, pageSize: 20 };
  let res = await Promise.all([
    GetInternshipProofTemplate({ ...pageData, type: 1 }),
    GetInternshipProofTemplate({ ...pageData, type: 2 }),
    GetInternshipProofTemplate({ ...pageData, type: 3 }),
    GetInternshipProofTemplate({ ...pageData, type: 4 })
  ]);
  internshipProofList.value = res;
  const { funcCtlInfos }: any = await GetBusinessModalData({
    funcCode: 'SER_FUNC9B158E4240DE49979E62895D0AEF9080'
  });
  funcCtlInfos.children.forEach(({ subDetail }: any) => {
    subDetail?.subRelDetail?.forEach(({ ctlCode, ctlCnName }: any) => {
      fieldList.value.push({ ctlCode, ctlCnName });
    });
  });
};
loadData();

let step = ref(1);
</script>

<style scoped>
.step1 {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
}
.htmlBox {
  width: 555px;
  padding: 20px;
  height: 802px;
  overflow-x: hidden;
  word-wrap: break-word;
  box-shadow: 0px 0px 10px var(--color-neutral-8);
  margin-top: 40px;
  margin-bottom: 20px;
}
</style>
